<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col>
          <div class="equity-wrap right-content">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/companyEdit' }">我的公司</el-breadcrumb-item>
              <el-breadcrumb-item>分支机构</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="wrap">
              <rotate-message></rotate-message>
              <div class="wrap-container">
                <div class="title"><div class="btn" @click="dialogVisible = true">添加</div></div>
                <div class="table-wrap">
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="bankName"
                        align="center"
                        label="支行名称">
                        </el-table-column>
                        <el-table-column
                        prop="contactName"
                        align="center"
                        label="联系人">
                        </el-table-column>
                        <el-table-column
                        label="联系信息"
                        align="center"
                        prop="contactPhone">
                        </el-table-column>  
                        <el-table-column
                        prop="statusDesc"
                        align="center"
                        label="当前状态">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="small"
                                  @click="showEditDialog(scope.row)"
                                  type="success">
                                  编辑
                                </el-button>
                                <el-button size="small" 
                                  type="success"
                                  @click="onOrOff({id: scope.row.id, status: 'on'})"
                                  v-if="scope.row.statusDesc == '下架'">
                                  上架
                                </el-button>
                                <el-button size="small" 
                                  @click="onOrOff({id: scope.row.id, status: 'off'})"
                                  type="success" 
                                  v-else>
                                  下架
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </div>
    </div>
    <el-dialog
        custom-class="branchDialog"
        title="添加分支机构"
        :visible.sync="dialogVisible"
        width="30%">
      <div class="whiteSpace mb30">
          <span class="label">分支机构名称：</span>
          <el-input
              type="input"
              placeholder="请输入内容"
              v-model="subBankName"
              style="flex: 1">
          </el-input>
      </div>
      <div class="whiteSpace mb30">
          <span class="label">联系人：</span>
          <el-input
              type="input"
              placeholder="请输入内容"
              v-model="contactName"
              style="flex: 1">
          </el-input>
      </div>
      <div class="whiteSpace mb30">
          <span class="label">联系信息：</span>
          <el-input
              type="input"
              placeholder="请输入内容"
              v-model="contactPhone"
              style="flex: 1">
          </el-input>
      </div>
      <div style="text-align: center">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button class="btn" type="primary" @click="saveSubBank">提 交</el-button>
      </div>
    </el-dialog>
        <el-dialog
        custom-class="branchDialog"
        title="修改分支机构"
        :visible.sync="editDialogVisible"
        width="30%">
      <div class="whiteSpace mb30">
          <span class="label">分支机构名称：</span>
          <el-input
              type="input"
              placeholder="请输入内容"
              v-model="editSubBankName"
              style="flex: 1">
          </el-input>
      </div>
      <div class="whiteSpace mb30">
          <span class="label">联系人：</span>
          <el-input
              type="input"
              placeholder="请输入内容"
              v-model="editContactName"
              style="flex: 1">
          </el-input>
      </div>
      <div class="whiteSpace mb30">
          <span class="label">联系信息：</span>
          <el-input
              type="input"
              placeholder="请输入内容"
              v-model="editContactPhone"
              style="flex: 1">
          </el-input>
      </div>
      <div style="text-align: center">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button class="btn" type="primary" @click="editSubBank">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const CONSTANT = require('../../../constant/constant.js'),
    { requestAjax, getCookie } = require('../../../common.js');
import VueRouter from 'vue-router'
export default {
  name: 'menulist',
  data(){
    return{
      href: '',
      tableData: [],
      dialogVisible: false,
      subBankName: '',
      contactName: '',
      contactPhone: '',
      editDialogVisible: false,
      editSubBankName: '',
      editContactName: '',
      editContactPhone: ''
    }
  },
  components: {
    'menu-top':() => import('../../common/Menu-Top'),
    'menu-left':() => import('../../common/Menu-Left'),
    "rotate-message": () => import("../../common/rotate-message")
  },  
  mounted(){
      this.loadData()
  },
  methods:{
    loadData() {
      const url = CONSTANT.URL.SYSTEM.SUBBANKLIST
      requestAjax(url, '{}', {id: 0}, ({ data, status }) => {
        if (status == 200) {
          this.tableData = data.bussData
        }
      })
    },
    onOrOff(param) {
      const url = CONSTANT.URL.SYSTEM.ONOFFSUBBANK
      requestAjax(url, JSON.stringify(param), {}, ({ data, status}) => {
        if (status == 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.loadData()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    saveSubBank() {
      const { subBankName, contactName, contactPhone } = this
      if (!subBankName || !contactName || !contactPhone) {
        return this.$message({
          type: 'warning',
          message: '请填写必要的内容'
        })
      }
      const url = CONSTANT.URL.SYSTEM.SAVESUBBANK
      const params = { subBankName, contactName, contactPhone }
      requestAjax(url, JSON.stringify(params), {}, ({ data, status }) => {
        if (status == 200) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.loadData()
        } else {
          this.$message.error('添加失败')
        }
      })
      this.dialogVisible = false
    },
    editSubBank() {
      const url = CONSTANT.URL.SYSTEM.SAVESUBBANK
      const { editSubBankName, editContactName, editContactPhone, editId, editUserId } = this
      if (!editSubBankName || !editContactName || !editContactPhone || !editId || !editUserId) {
        return this.$message({
          type: 'warning',
          message: '请填写必要的内容'
        })
      }
      const params = { 
        subBankName: editSubBankName, 
        contactName: editContactName, 
        contactPhone: editContactPhone, 
        id: editId, 
        userId: editUserId 
      }
      requestAjax(url, JSON.stringify(params), {}, ({ data, status }) => {
        if (status == 200) {
          this.$message({
            type: 'success',
            message: '编辑成功'
          })
          this.loadData()
        } else {
          this.$message.error('编辑失败')
        }
      })
      this.editDialogVisible = false      
    },
    showEditDialog(data) {
      this.editSubBankName = data.subBankName
      this.editContactName = data.contactName
      this.editContactPhone = data.contactPhone
      this.editId = data.id
      this.editUserId = data.userId
      this.editDialogVisible = true
    }
  }
}
</script>

<style  lang="scss" scoped>
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.label {
  display: inline-block;
  width: 100px;
  text-align: right;
  line-height: 40px;
  margin-right: 20px;
}

.mb30 {
  margin-bottom: 30px;
  display: flex;
}

.btn {
  background-color: #ED7018;
  border: none;
}

.btn:hover {
  background-color: #ED9000;
}

.content{
  min-height: 100%;
  background-color: #f5f5f5;
  width: 81.3%;
  float: right;
}

.content-wrap{
  overflow: hidden;
}

.equity-wrap{
  padding-top: 29px;
  .wrap{
    background-color: #f5f5f5;
    .title-head{
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      margin-top: 18px;
      padding-left: 20px;
      font-size: 14px;
      color: #666;
      span{
        color: #0087DC;
        cursor: pointer;
      }
    }
    .el-table__row{
        td{
            height: 50px;
            padding: 0;
        }
    }
    .wrap-container{
      padding: 11px 60px 33px 29px;
      background-color: #fff;
      margin-top: 20px;
      .title{
        padding-bottom: 18px;
        padding-top: 10px;
        span{
            color: #111;
            font-weight: bold;
        }
        .btn{
            display: inline-block;
            width: 73px;
            height: 40px;
            background-color: #ED7018;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            &:hover{
                background-color: #ED9000;
                transition:all .2s linear
            } 
        }
      }

    }
  }
  .el-button--primary{
          border-radius: 4px;
          -webkit-border-radius: 4px;
          background-color: #ED7018;
          border: 0PX;
          &:hover{
          background-color: #ED9000;
          transition:all .2s linear
          } 
  }
  .el-dialog__body{
      .el-form-item__error{
          top: 100%;
          left: 0;
      }
      .el-input{
          width: 300px;
      }
      .el-select{
            width: 300px;
        }
    .el-form-item.stock{
    }
  }
}

a{
  text-decoration: none;
}
</style>